<template>
	<div class="thePage flex-center">
		<div class="pg-main flex-column">
			<div v-for="(item,i) in menuList" :key="i" 
			:class="`bg${i}`" @click="onClick(i)">{{menuList[i].text}}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "Home",
	components: {},
	data() {
		return {			
		};
	},
	props:{
		menuList:{
			type:Array,
			default:[]
		}
	},
	methods:{
		onClick(index){
			this.$router.push({name:this.menuList[index].routeName})
		},
	}
};
</script>

<style lang="less" scoped>
.pg-main{	
	font-size: 36px;
	font-weight: bold;
	color: white;
	text-align: left;
	.bg0,.bg1,.bg2,.bg3{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-shadow: 0px 3px 9px 0px rgba(118, 163, 235, 0.9);
		border-radius: 20px;
		padding: 50px 40px;
		margin: 20px 20px 20px 20px;
	}	
	.bg0{
		background-image: url("~@/pics/bg_blue.png");		
	}
	.bg1{
		background-image: url("~@/pics/bg_red.png");		
	}
	.bg2{
		background-image: url("~@/pics/bg_yellow.png");		
	}
	.bg3{
		background-image: url("~@/pics/bg_purple.png");		
	}
}
</style>
